<template>
  <div class="authentication pb20 bgpart ptb40 ">
    <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules">
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="$t('Name')" props="name">
        <a-input v-model="ruleForm.name" :placeholder="$t('Please enter your name')"></a-input>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="$t('ID number')" props="idNo">
        <a-input v-model="ruleForm.idNo" :placeholder="$t('Please enter your ID number')"></a-input>
      </a-form-model-item>
      <a-form-model-item :label="$t('Front photo of ID card')" :wrapper-col="wrapperCol" :label-col="labelCol">
        <UploadImage v-model="ruleForm.img" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 5, offset: 4 }">
        <a-button type="primary" @click="onSubmit" size="large" block :loading="submitLoading">
          {{$t('Submit')}}
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import UploadImage from "@/components/UploadImage.vue";
import { fetchUserReal } from "@/api/sys"
export default {
  components: {
    UploadImage,
  },
  data() {
    return {
      ruleForm: {
        name: '',
        idNo: '',
        img: ''
      },
      rules: {
        idNo: [{required: true, message: this.$t('Please enter your ID number')}],
        name: [{required: true, message: this.$t('Please enter your name')}],
        img: [{required: true, message: this.$t('Please upload the ID photo')}]
      },
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      submitLoading: false
    }
  },
  methods: {
    onSubmit() {
      console.log(this.ruleForm, 'UploadImage');
      
      this.$refs.ruleForm.validate((valid)=>{
        if(valid){
          this.submitLoading = true
          fetchUserReal(this.ruleForm).then(()=>{
            this.submitLoading = false
            this.$success()
          }).catch(()=>{
            this.submitLoading = false
          })
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.authentication {
  :deep(.ant-input) {
    color: white;
  }
}
</style>
